<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <van-index-anchor index="#">热门</van-index-anchor>
      <div class="hotCities">
        <template v-for="(v1, k1, i1) in groupData.hotCities" :key="i1">
          <div class="hotCity" @click="checkClick(v1)">{{ v1.cityName }}</div>
        </template>
      </div>

      <template v-for="(v2, k2, i2) in groupData.cities" :key="i2">
        <van-index-anchor :index="v2.group"></van-index-anchor>
        <template v-for="v21 in v2.cities" :key="v21">
          <van-cell :title="v21.cityName" @click="checkClick(v21)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";
import usecityStore from "../../../stores/modules/cityStore";
import { useRouter } from "vue-router";
const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({}),
  },
});
// 抽取索引表
const indexList = computed(() => {
  const indexList = props.groupData.cities.map((item) => item.group);
  indexList.unshift("#");
  return indexList;
});

// 城市点击事件
const cityStore = usecityStore();
const router = useRouter();
const checkClick = (city) => {
  cityStore.currentCity = city;
  router.back();
};
</script>

<style lang="less" scoped>
.hotCities {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 10px;
  padding-right: 25px;
  .hotCity {
    height: 28px;
    width: 70px;
    background-color: #ffcc66;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    margin-top: 4px;
  }
}
</style>
